<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<h1>ajax使用原生js实现异步更新</h1>
<div>
    <form id="register-form" autocomplete="on">
        昵称：<input id="username" type="text" name="username" placeholder="请输入昵称"/><span
            id="username_span"></span><br/>
        密码：<input id="password" type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="新用户注册"/>
    </form>
</div>
</body>
<script src="js/my_jquery3.6.js"></script>
<script>
    /*//ajax使用原生js实现异步更新
    //1.为昵称input组件绑定失去焦点的事件
    document.getElementById("username").onblur = function () {
        let username = document.getElementById("username").value;
        //2.创建xmlHttpRequest对象
        let xmlHttpRequest = new XMLHttpRequest();
        //3.添加请求方式和url打开后端链接
        xmlHttpRequest.open("GET", "http://localhost:8080/user/register?username=" + username, true);
        //4.发送请求
        xmlHttpRequest.send();
        //4.处理响应的数据
        xmlHttpRequest.onreadystatechange = function () {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                document.getElementById("username_span").innerHTML = xmlHttpRequest.responseText;
            }
        }
    }*/
    /* //ajax使用jquery的post方式实现异步更新
     $("#username").blur(function () {
         let username = $("#username").val();
         $.post("user/register2","username="+username,function (data) {
             $("#username_span").html(data);
         },"text");
     })*/
    //ajax使用jquery通用方式实现异步更新
    $("#username").blur(function () {
        let username = $("#username").val();
        $.ajax({
                //1.请求的url
                url: "user/register2",
                //2.是否异步请求,true是异步请求，false是同步请求不能实现网页局部刷新
                async: true,
                //3.请求参数
                data: "username=" + username,
                //4.请求的方式
                type: "post",
                //5.服务端响应的数据形式,html,xml,text等
                dataType: "text",
                //6.成功回调函数
                success: function (data) {
                    $("#username_span").html(data);
                },
                //7.失败回调函数
                error: function (error) {
                    alert("请求服务端失败:" + error);
                }

            }
        )
    })

</script>
</html>